import React from 'react';
import './Header.less';
import logo from '../../assets/img/logo.png';
import logo192 from '../../assets/img/logo192.png';

import { Layout, Typography, Menu, Button } from 'antd';
import { withRouter, RouteComponentProps } from 'react-router-dom';

const { SubMenu } = Menu;
class HeaderComponnet extends React.Component<RouteComponentProps> {
  state = {
    current: '/',
  };

  handleClick = (e: any) => {
    this.props.history.push(e.key);
    this.setState({ current: e.key });
  };

  render() {
    const { current } = this.state;
    const { history } = this.props;
    return (
      <div className='app-header'>
        {/* 最顶部 */}
        <div className='top-header'>
          <div className='inner'>
            <Typography.Text>
              您好，欢迎来到汽配采购平台！<b style={{ marginLeft: '20px' }}></b>
              客服电话：400-323-2333
            </Typography.Text>
            <Button.Group>
              <span onClick={() => history.push('register')}>注册</span>
              <span onClick={() => history.push('login')}>登陆</span>
            </Button.Group>
          </div>
        </div>
        {/* 导航 */}
        <Layout.Header className='new_header'>
          <span onClick={() => history.push('/')}>
            <img src={logo} alt='logo' />
            <Typography.Title level={3} className='title'>
              放心采购，做出好生意
            </Typography.Title>
          </span>
          <Menu
            mode={'horizontal'}
            selectedKeys={[current]}
            onClick={this.handleClick}
          >
            <Menu.Item key='/'>首页</Menu.Item>
            <Menu.Item key={2}>配件采购</Menu.Item>
            <Menu.Item key='/Inquiry'>询价单</Menu.Item>
            <Menu.Item key='4'> 订单 </Menu.Item>
            <Menu.Item key='5'> 供应商入住 </Menu.Item>
            <SubMenu
              className='submenu'
              key='SubMenu'
              icon={<img src={logo192} alt='' />}
              title='个人中心'
            >
              <Menu.Item key='setting:1'>个人资料</Menu.Item>
              <Menu.Item key='setting:2'>退出登录</Menu.Item>
            </SubMenu>
          </Menu>
        </Layout.Header>
      </div>
    );
  }
}
export const Header = withRouter(HeaderComponnet);
